<template>
  <div class="foucse-box-body">
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">今日异常学生</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">0</span><span class="foucse-box-count-p">人</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在册学生</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('studentIndex')">{{statisticsData?statisticsData.student.count:0}} <span>人</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在园学生</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('studentIndex')">{{statisticsData?statisticsData.student.count:0}} <span>人</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">今日异常职工</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">0</span><span class="foucse-box-count-p">人</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在册职工</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('tearchIndex')">{{statisticsData?statisticsData.teacher.count:0}} <span>人</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在园职工</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('tearchIndex')">{{statisticsData?statisticsData.teacher.count:0}} <span>人</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">今日在线区角</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">{{statisticsData?statisticsData.corner.count:0}}</span><span
                  class="foucse-box-count-p"></span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">本园总区角</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('CornerIndex')">{{statisticsData?statisticsData.corner.count:0}} <span>人</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">累计预约</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('CornerIndex')">{{statisticsData?statisticsData.corner.apply:0}} <span>次</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">今日餐品</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">{{statisticsData?statisticsData.dish.count:0}}</span><span
                  class="foucse-box-count-p"></span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <!--<p class="foucse-box-n-l-t">本园总餐品</p>-->
              <!--<p class="foucse-box-n-l-b">{{statisticsData?statisticsData.dish.apply:0}} <span></span></p>-->
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">累计评价</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('foodList')">{{statisticsData?statisticsData.dish.release:0}} <span>次</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">今日晨检</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">0</span><span class="foucse-box-count-p">次/人</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">晨检提醒</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('evaluateIndex')">0 <span>人</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">累计晨检</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('evaluateIndex')">0 <span>次</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">本园图书</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">{{statisticsData?statisticsData.book.count:0}}</span><span
                  class="foucse-box-count-p">册</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在库</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('book')">{{statisticsData?statisticsData.book.in_library:0}} <span>册</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">外借</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('book')">{{statisticsData?statisticsData.book.lend:0}} <span>册</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">本园物料</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">{{statisticsData?statisticsData.materiel.count:0}}</span><span
                  class="foucse-box-count-p">件</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在库</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('materiel')">{{statisticsData?statisticsData.materiel.in_library:0}} <span>件</span>
              </p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">警报物料</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('materiel')">{{statisticsData?statisticsData.materiel.alarm:0}} <span>件</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">消耗</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('materiel')">{{statisticsData?statisticsData.materiel.lend:0}} <span>件</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foucse-box">
      <div class="foucse-boxind">
        <div class="foucse-boxindbg" :style="{background: 'url('+foucseBox+')',backgroundRepeat: 'no-repeat'}">
          <p class="foucse-box-title">本园教具</p>
          <div class="foucse-box-count">
            <span class="foucse-box-count-number">{{statisticsData?statisticsData.tools.lend:0}}</span><span
                  class="foucse-box-count-p">件</span>
          </div>
          <div class="foucse-box-n">
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">在库</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('teaching')">{{statisticsData?statisticsData.tools.in_library:0}} <span>件</span>
              </p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">使用中</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('teaching')">{{statisticsData?statisticsData.tools.lend:0}} <span>件</span></p>
            </div>
            <div class="foucse-box-n-l">
              <p class="foucse-box-n-l-t">核销</p>
              <p class="foucse-box-n-l-b" @click="pathIndexFn('teaching')">{{statisticsData?statisticsData.tools.scrap:0}} <span>件</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {myFouces} from '@/utils/util.js'
  import foucseBox from '@/assets/imageAdmin/focese.png'
  export default {
    props: ['statisticsData'],
    components: {
      foucseBox
    },
    name: 'powerTop',
    data () {
      return {
        myFouces: myFouces,
        foucseBox: foucseBox
      }
    },
    created () {
      // this.InitFn()
    },
    methods: {
      pathIndexFn (option) {
        this.$router.push(myFouces[option])
      }
    }
  }
</script>
